// import { FC,useEffect } from 'react';
 

// const DepList: FC<any> = (props:any): JSX.Element => {

//     useEffect(()=>{
//     },[])

//     return (
//       <div>部门列表</div>
//     )
// }
// export default DepList;



import React, { useEffect, useMemo, useState, ReactNode, useRef } from 'react';
import { Form, Input, Button, Checkbox, message, Tree, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import '../../static/css/department/deplist.css'
import { Apideplist, DeparmentsDel } from '../../apis/dep'
import DepUpda from './depupda'
import { useNavigate } from 'react-router';
interface IDepartment {
    id: number,
    name: string,
    parent_id: number,
    user: string,
    user_mobile: string | null,
    openid: number | null,
    son: Array<IDepartment>
}
const DepList: React.FC = () => {
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };
    const [depList, setDeplist] = useState()
   
    const getNode = (name: string, id: number): ReactNode => {
        return (<div className='treeitem'><div>{name}</div>  <div><Button onClick={edit(id)} type="primary">修改</Button><Button onClick={showdel(id)} type="primary" danger> 删除</Button></div></div>)
    }
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [depid, setdepid] = useState<number>(0);
    const navrigate = useNavigate()
    const { confirm } = Modal;
    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        console.log(1111);
        
        setIsModalVisible(false);
    };
    const deplist = async () => {
        let res = await Apideplist()
        if (res.code === '00000') {
            let _data: any = toParse([...res.data]);
            setDeplist(_data);
        }
    }
    const edit = (id: number) => {
        return () => {
            setdepid(id)
            setIsModalVisible(true);

        }
    }
    const del = async(id: number) => {

        let res = await DeparmentsDel(id)
        console.log(res);
        
        if (res.code === '00000') {
            deplist();
            message.success('删除成功');
        }

    }
    const showdel = (id: number): any => {
        return async () => {
            // alert(id)
            confirm({
                title: '此操作将永久删除该数据,是否继续',
                icon: <ExclamationCircleOutlined />,
                onOk() {
                    del(id)
                },
                onCancel() {
                    console.log('Cancel');
                },
            });
        }
    };
    const toParse = (arr: any) => {
        arr.forEach((item: any) => {
            if (item.son && Array.isArray(item.son)) {
                item["name"] = getNode(item.name, item.id);
                toParse(item.son)
            }
        })
        return arr
    }
    const search = () => {

    }
    const add = () => {
        navrigate('/index/departmentUpdate')
    }
    useEffect(() => {
        deplist()
    }, [])
    return (
        <div>
            <Modal title="修改" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
                <DepUpda depid={depid} handleCancel={handleCancel}></DepUpda>
            </Modal>
            <Form name="complex-form" onFinish={onFinish} labelCol={{ span: 0 }} wrapperCol={{ span: 20 }}>
                <Form.Item>
                    <Input style={{ width: 160 }} placeholder="请输入部门" />
                    <Button type="primary" htmlType="submit" onClick={search}>
                        查询
                    </Button>
                    <Button type="primary" htmlType="submit" onClick={add}>
                        添加
                    </Button>
                </Form.Item>

            </Form>
            
            <Tree
                fieldNames={{ title: 'name', key: 'id', children: 'son' }}
                treeData={depList}
                defaultExpandAll={true}
            />
        </div>
    )
}
export default DepList